<template>
    <div class="login-account" >
    <el-form label-position="right" label-width="auto" :model="account" :rules="rules" ref="formRef">
        <el-form-item label="账号" prop="name">
            <el-input v-model="account.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="account.password"></el-input>
        </el-form-item>
    </el-form>
</div>
</template>
<script lang="ts" setup>
import { useStore } from 'vuex';
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import {rules} from '../config/account-config';
import localCache from '@/utils/cache';

const account = reactive({
    name:'',
    password:''
})

const store = useStore();
const formRef = ref<InstanceType<typeof ElForm>>();
const loginAction = (isKeepPwd: boolean) => {
    formRef.value?.validate((valid) => {
        if(valid) {
           if(isKeepPwd) {
             localCache.setCache('name', account.name);
             localCache.setCache('password', account.password);
           } else{
            localCache.deleteCache('name');
            localCache.deleteCache('password');
           }

           store.dispatch('login/accountLoginAction', { ... account})
        }
    })
}

const setFormFields = (name: string, password: string) => {
    account.name = name || account.name;
    account.password = password || account.password;

}

defineExpose ({loginAction, setFormFields})
</script>
<style scoped lang="less">

</style>